<template>
  <div class="index-container">
    <!-- 头部内容 -->
    <el-row>
      <el-card class="header_card">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
            <TipsCard
              num-tip="13"
              text-tip="游戏总数"
              icon="iconfont icon-anjianjingling"
              icon-bgc-color="#2d8cf0"
              @cardClick="cardClick(1)"
            />
          </el-col>
          <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
            <TipsCard
              num-tip="2000"
              text-tip="商品总数"
              icon="iconfont icon-js"
              icon-bgc-color="#2d8cf0"
              @cardClick="cardClick(2)"
            />
          </el-col>
          <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
            <TipsCard
              num-tip="150"
              text-tip="员工数量"
              icon="el-icon-user-solid"
              icon-bgc-color="#2f4554"
              @cardClick="cardClick(3)"
            />
          </el-col>
          <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
            <TipsCard
              num-tip="123"
              text-tip="当前时间"
              icon="el-icon-user-solid"
              icon-bgc-color="#2f4554"
              @cardClick="cardClick(4)"
            />
          </el-col>
        </el-row>
      </el-card>
    </el-row>

    <el-row :class="clientW > 1200 ? 'row_charts' : 'row_charts_z_bottom'">
      <!-- 饼图 -->
      <el-col :xs="24" :sm="24" :md="24" :lg="8">
        <el-card>
          <div id="pie" class="eCharts" />
        </el-card>
      </el-col>
      <!-- 柱状图 -->
      <el-col
        :xs="24"
        :sm="24"
        :md="24"
        :lg="16"
        :class="clientW > 1200 ? 'eCharts_right' : 'eCharts_right_z_bottom'"
      >
        <el-card>
          <div class="systemLogInfo">
            <div class="left">1</div>
            <div class="right">2</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import * as echarts from 'echarts'
import TipsCard from './components/TipsCard.vue'
export default {
  components: {
    TipsCard
  },
  data() {
    return {
      pieChart: null,
      clientW: 0 // 浏览器可视区宽度
    }
  },
  computed: {
  },
  created() {
    this.loadData()
  },
  mounted() {
    // console.log("开始渲染图表");

    this.initCharts_pie()
    window.addEventListener('resize', this.windowsResize)
    this.windowsResize() // 处理初始没进reseze事件导致的样式错乱
  },
  methods: {
    // 卡片点击
    cardClick(v) {
      console.log('首页接口结果', v)
      // if (v === 1) {
      //   open('http://47.92.154.219:125/手机按键.rar')
      // } else {
      //   open('http://47.92.154.219:125/简易商店平台.js')
      // }
    },
    loadData() {
    },
    // 渲染饼图
    initCharts_pie() {
      // eslint-disable-next-line no-undef
      this.pieChart = echarts.init(document.querySelector('#pie'))
      const option = {
        title: {
          text: '用户访问来源',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical', // 纵向显示
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            center: ['50%', '60%'],
            data: [
              { value: 1048, name: '直接访问' },
              { value: 735, name: '邮件营销' },
              { value: 580, name: '联盟广告' },
              { value: 484, name: '视频广告' },
              { value: 300, name: '搜索引擎' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      this.pieChart.setOption(option)
    },
    windowsResize() {
      // console.log('可视区宽度：', document.documentElement.clientWidth);
      this.clientW = document.documentElement.clientWidth
      this.chartResize() // 图表重置
    },
    chartResize() {
      // console.log('winResize事件');
      const eleArr = [this.pieChart]
      for (let i = 0; i < eleArr.length; i++) {
        // 此处定时器是为了在页面存在多个图时，resize方法的调用时间微微错开，避免明显的卡顿
        setTimeout(function() {
          eleArr[i].resize()
        }, 200)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.index-container {
  margin: 10px;
  .systemLogInfo{
    display: flex;
    min-height: 250px;
    .left{
      border: 1px solid red;
      flex: 1;
    }
    .right{
      border: 1px solid blue;
      flex: 1;
    }
  }
}
.el-card.header_card {
  background-color: #f5f7f9;
}
.eCharts {
  width: 100%;
  height: 250px;
}
.row_charts {
  margin: 20px 0;
}
.row_charts_z_bottom {
  margin: 20px 0 0 0;
}
//浏览器可视区大于1200px时使用该样式↓ 小于时删除
.eCharts_right {
  padding-left: 20px;
}
//浏览器可视区小于1200px
.eCharts_right_z_bottom {
  margin: 20px 0;
}
</style>
